<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  #goods {
    background-color: #f1f1f2;
  }
</style>

<body>
  <div id="goods">
    <div style="padding-top: 1%;padding-left: 2%; background-color: #97df4f;display: flex;">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <div style="margin-top: 0.25%;margin-left: 7%;">
        <h4 style="font-weight: 600;">誉禾植物店后台管理</h4>
      </div>
    </div>
    <div style="display: flex;margin-top: 0.5%;">
      <div style="width: 15%;">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          :collapse="isCollapse">
          <el-menu-item index="1">
            <span slot="title"><a href="./home.html">主页</a></span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title"><a href="./goods.html">植物管理</a></span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title"><a href="./addGoods.html">新增植物</a></span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title"><a href="./information.html">新闻管理</a></span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title"><a href="./addInformation.html">新增新闻</a></span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title"><a href="./order.html">订单管理</a></span>
          </el-menu-item>
          <el-menu-item index="7">
            <span slot="title"><a href="./user.html">用户管理</a></span>
          </el-menu-item>
          <el-menu-item index="8">
            <span slot="title"><a href="./userinfo.html">个人信息</a></span>
          </el-menu-item>
          <el-menu-item index="9">
            <span slot="title"><a href="./login.html">退出登录</a></span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="width: 85%;padding-top: 2%;">
        <div style="width: 85%;margin: auto;padding-top: 3%;">
          <div style="width: 100%; border-bottom: 1px solid #aca7a7;display: flex;">
            <div><span style="font-size: 20px;font-weight: 600;">用户管理</span></div>
            <div style="margin-left: auto; display: flex; padding-bottom: 1%;">
              <el-input v-model="input" placeholder="请输入用户名称"></el-input>
              <el-button @click="search()" plain>搜索</el-button>
            </div>
          </div>
          <div style="margin-top: 3%;">
            <el-table :data="tableData" style="width: 100%" max-height="850"
              :header-cell-style="{background: '#97df4f',color: '#000'}">
              <el-table-column prop="id" label="id">
              </el-table-column>
              <el-table-column prop="name" label="名称">
              </el-table-column>
              <el-table-column prop="account" label="账号">
              </el-table-column>
              <el-table-column prop="password" label="密码">
              </el-table-column>
              <el-table-column prop="email" label="邮箱">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row)" type="success">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 1%; text-align: center;">
              <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                @current-change="currentPage" :page-size="6">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除弹窗 -->

    <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
      <span>你确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userDelete()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible2" width="50%">
      <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="id" prop="id">
          <el-input type="text" v-model="ruleForm.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input type="text" v-model="ruleForm.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="dialogVisible2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</body>
<script>
  new Vue({
    el: '#goods',
    data() {
      return {
        isCollapse: false,
        input: '',
        tableData: [],
        ruleForm: {},
        dialogVisible: false,
        dialogVisible2: false,
        current: 1,
        total: 1,
        deleteId: 0,
      };
    },
    created() {
      // 判断是否有登录
      if (localStorage.getItem("managentId") == null) {
        window.location.href = './login.html';
        return;
      } else {
        this.page_init();
      }
    },
    methods: {
      // 确定编辑
      async submitForm() {
        const { data: result } = await this.$http.post('http://localhost:9081/plants_user/update', this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.dialogVisible2 = false;
      },
      // 编辑
      handleEdit(row) {
        this.dialogVisible2 = true;
        this.ruleForm = row;
      },
      // 搜索
      async search() {
        // 判断用户是否有输入数据
        if (this.input == "") {
          // 相当于刷新页面
          this.page_init();
          this.current = 1;
          return;
        }
        const { data: result } = await this.$http.get('http://localhost:9081/plants_user/search/' + this.input + '/' + this.current);
        if (result.flag) {
          // 搜索的数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总条数
          this.total = result.total;
        }
      },
      // 确认删除
      async userDelete() {
        const { data: result } = await this.$http.get('http://localhost:9081/plants_user/delete/' + this.deleteId);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.dialogVisible = false;
        this.page_init();
      },
      // 删除
      handleDelete(row) {
        // 打开弹窗
        this.dialogVisible = true;
        // 赋值需要删除的用户id
        this.deleteId = row.id;
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        if (this.name == "") {
          // 当不搜索的时候，会调用这个方法
          this.page_init();
        } else {
          // 当搜索的时候会调用这个方法
          this.search();
        }
      },
      // 初始化
      async page_init() {
        const { data: result } = await this.$http.get("http://localhost:9081/plants_user/page/" + this.current);
        if (result.flag) {
          // 赋值数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总页面
          this.total = result.total;
        } else {
          this.$message.error(result.message)
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    }
  })
</script>

</html>